<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 50px;
            height: 50px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script>
        var div1=document.getElementById("div1");
        var x=0;
        var y=0;
        var status="right";
        // 忘了带上引号
        // setInterval(function(){

        // },16)每16毫秒执行程序一次
        setInterval(function(){
            switch(status){

                case "right": 
                // 忘掉了带上冒号
                x++;
                if(x===200) status="down";
                break;
                case "down":
                y++;
                if(y===200) status="left";
                break;
                case "left":
                x--;
                if(x===0) status:"top"
                break
                case "top":
                y--;
                if(y===0) status:"right"
                break
                

                
                


            }
                div1.style.left=x+"px";
                div1.style.top=y+"px";
                // 对css进行连接，进行运动
        },16)
       
    </script>
</body>
</html>